<template>
  <div class="wholesale-add">
    <div class="control">
      <h1>手术跟台订单</h1>
      <el-row>
        <el-col :span="16" class="desc">描述性文字</el-col>
        <el-col :span="8" class="right">
          <el-button @click="onSaveDraft">暂存</el-button>
          <el-button type="primary" plain @click="onPrev" v-if="active_index !== 1">上一步</el-button>
          <el-button type="primary" @click="onNext" v-if="active_index !== 3">下一步</el-button>
          <el-button type="success" @click="onSubmit" v-else>提交</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="block">
      <section>
        <el-steps :active="active_index -1" finish-status="success" align-center>
          <el-step title="选择供应商及合同"></el-step>
          <el-step title="选择采购产品"></el-step>
          <el-step title="填写订单信息"></el-step>
        </el-steps>
      </section>
    </div>
    <article :hidden="!(active_index === 1)">
      <supplier-and-contract-component
        :supplier-id.sync="form_data.supplier"
        :contract-id.sync="form_data.contract"
        :bus-model="bus_model"
        @change="onSupplierAndContractChange"
      ></supplier-and-contract-component>
    </article>
    <article :hidden="!(active_index === 2)">
      <div class="block">
        <section>
          <el-form-renderer
            ref="ruleForm"
            label-width="100px"
            :form="readonly_formdata"
            :content="FIELDS_ORDER_DETAIL"
            inline
            readonly
          ></el-form-renderer>
          <el-form ref="form" :model="form_data" label-width="100px">
            <el-form-item label="手术类型：" required>
              <el-select v-model="form_data.surgery_type" placeholder="请选择">
                <el-option
                  v-for="item in form_data.rows_surgery_type"
                  :key="item.id"
                  :label="item.operationType"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </section>
      </div>
      <purchase-products-list-component :products.sync="form_data.products" type="surgery"></purchase-products-list-component>
      <purchase-tools-list-component :tools.sync="form_data.tools"></purchase-tools-list-component>
    </article>
    <article :hidden="!(active_index === 3)">
      <div class="block">
        <header>
          <h2>手术信息</h2>
        </header>
        <section>
          <el-form :model="form_data.surgery" label-width="100px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="手术日期：">
                  <el-date-picker v-model="form_data.surgery.operationDate" class="w100p"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="手术医院：">
                  <el-select
                    v-model="form_data.surgery.hospCode"
                    placeholder="请选择"
                    class="w100p"
                    @change="onChangeHospital"
                  >
                    <el-option
                      :label="item.hospName"
                      :value="item.hospCode"
                      v-for="item in rows_hosp_list"
                      :key="item.hospCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="分仓名称：">
                  <el-input v-model="form_data.surgery.operationHouseName" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="手术医生：">
                  <el-input v-model="form_data.surgery.operationDoc"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="患者症状：">
                  <el-input v-model="form_data.surgery.symptom"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="患者性别：">
                  <el-radio-group v-model="form_data.surgery.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="患者姓名：">
                  <el-input v-model="form_data.surgery.name"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </section>
      </div>
      <carryway-and-address-component
        @change-address="onAddressChanged"
        :carryway-id.sync="form_data.carryway"
        :address-id.sync="form_data.address"
        :is-edit="is_edit"
      ></carryway-and-address-component>
      <div class="block">
        <header>
          <h2>备注信息</h2>
        </header>
        <section>
          <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="form_data.remark"></el-input>
        </section>
      </div>
      <div class="block">
        <header>
          <h2>附加信息</h2>
        </header>
        <section>
          <el-form-renderer
            label-width="100px"
            v-model="form_data.extend"
            :content="extend_model"
            inline
          ></el-form-renderer>
        </section>
      </div>
    </article>
  </div>
</template>

<script src="./index.js"></script>
<style lang="less" src="./index.less"></style>
